<template>
	<view class="root-view">
		<view class="device-layout-block">
			<!-- 成功 -->
			<view class="device-layout-mod">
				<view class="device-layout-mhead" v-if="false">
					<evan-steps :active="3" direction="horizontal" primaryColor="#428cff">
						<evan-step></evan-step>
						<evan-step></evan-step>
						<evan-step></evan-step>
					</evan-steps>
					 <!-- <u-steps :list="numList" :current="0" mode="number" active-color="#428cff"></u-steps> -->
				</view>
				<view class="device-layout-mbody">
					<view class="dver-mod">
						<view class="dver-mhead">
							<view class="dver-progress">
								<u-line-progress :percent="100" :height="40" :show-percent="false" :striped-active="true" :striped="true" :round="false" active-color="#ff9900"></u-line-progress>
							</view>
							<view class="dver-texts">
								<view class="text-lab">设备配置成功，请等待设备返回数据</view>
								<!-- <view class="text-countdown">34s</view> -->
							</view>
						</view>
						<view class="dver-cells">
							<view class="dver-cell coco-active">
								<view class="cell-body">
									等待数据返回中
								</view>
								<view class="cell-icon">
									<u-icon name="reload" size="40" ></u-icon>
									
								</view>
							</view>
							<view class="dver-cell">
								<view class="cell-body">
									设备配网完成
								</view>
								<view class="cell-icon">
									<u-icon name="checkmark-circle" size="40"></u-icon>
								</view>
							</view>
							<view class="dver-cell">
								<view class="cell-body">
									设备添加成功
								</view>
								<view class="cell-icon">
									<u-icon name="checkmark-circle" size="40"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
				 
			</view>
			<!-- /成功 -->
			<!-- 失败 -->
			<view class="device-layout-mod"  v-if="false">
				<view class="device-layout-mhead">
					<evan-steps :active="2" direction="horizontal" primaryColor="#428cff">
						<evan-step></evan-step>
						<evan-step></evan-step>
						<evan-step status="error"></evan-step>
					</evan-steps>
					 <!-- <u-steps :list="numList" :current="0" mode="number" active-color="#428cff"></u-steps> -->
				</view>
				<view class="device-layout-mbody">
					<view class="textinfo-box">
						<view class="textinfo-title u-flex">
							<u-icon class="u-m-r-20" name="info-circle-fill" color="#a4a3a3" size="44"></u-icon>
							<text>链接失败</text>
						</view>
						<view class="textinfo-desc">未发现设备，请排查一下设备原因</view>
						<view class="textinfo-ol">
							<view class="ol-li">1：检查WI-FI环境是否正常</view>
							<view class="ol-li">2：设备和手机链接是不是在不同的网络</view>
							<view class="ol-li">3：路由器设置了MAC地址绑定</view>
							<view class="ol-li">4：设备已链接路由器 但绑定超时</view>
						</view>
					</view>
				</view>
				<view class="device-layout-mfoot u-p-t-80">
					<view class="device-layout-btns">
						<view class="btn-row">
							<button class="coco-btn theme round lg shadow" >重新绑定</button>
						</view>
						<view class="btn-row">
							<button class="coco-btn white round lg shadow">取消绑定</button>
						</view>
					</view>
				</view>
			</view>
			<!-- /失败 -->
		</view>
		
	</view>
</template>

<script>
	import evanStep from '@/components/evan-steps/evan-step.vue';
	export default {
		components:{
			evanStep
		},
		data() {
			return {
				numList: [{
					name: '滤芯'
				}, {
					name: 'WIFI'
				}, {
					name: '设备'
				} ],
			};
		},
		onLoad() {
			this.getDeviceData();
		},
		methods:{
			jump(path) {
				this.$tools.routerTo(path);
			},
			getDeviceData(){
				let address = uni.getStorageSync("deviceMac");
				this.$post("/api/device/check_device_data",{mac:address},"",false).then(res => {
					if(res.code == 1){
						uni.setStorageSync("device_id",res.data.device_id);
						uni.switchTab({
							url:"/pages/index/index"
						})
					}
					else{
						if(res.data.errCode == 100){
							this.$u.toast(res.msg);
							setTimeout(() => {
								uni.switchTab({
									url:"/pages/index/devices"
								})
							},1500);
							
						}
						else{
							setTimeout(() => {
								this.getDeviceData();
							},1000);
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "./css/device.scss";
</style>
